<template>
  <div>
    <basic-container class="v-infinite-scroll" v-infinite-scroll="infiniteScrollEvent">
      <el-form ref="tableOptionSearch" :model="searchForm" label-width="80px" size="mini" :inline="true">
        <el-form-item label="设备状态:">
          <el-select v-model="searchForm.state" placeholder="请选择">
            <el-option label="全部" value="-1"></el-option>
            <el-option v-for="(item) in DIC.EQUIPMENT_STATUS" :key="item.id" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="放置位置:">
          <el-select v-model="searchForm.location" placeholder="请选择">
            <el-option label="全部" value="-1"></el-option>
            <el-option v-for="(item) in DIC.STORAGE_LOCATION" :key="item.id" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否异常:">
          <el-select v-model="searchForm.isStatus" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="正常设备" value="0"></el-option>
            <el-option label="异常设备" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备类别:">
          <el-cascader v-model="searchForm.equipmentTypeId"
                       :options="equipmentType"
                       :props="{ expandTrigger: 'hover' }"
                       @change="equipmentTypeChange()"></el-cascader>
        </el-form-item>
        <!--<el-form-item  label="审批号:">
          <el-input v-model="searchForm.name" placeholder="请输入审批号"></el-input>
        </el-form-item>
        <el-form-item  label="申请部门:">
          <el-input v-model="searchForm.name" placeholder="请输入申请部门"></el-input>
        </el-form-item>
        <el-form-item  label="申请人:">
          <el-input v-model="searchForm.name" placeholder="请输入申请人"></el-input>
        </el-form-item>-->
          <el-form-item  label-width="20px">
            <el-button type="primary" @click="searchFormSubmit()">搜索</el-button>
            <el-button @click="ResetForm()">重置</el-button>
          </el-form-item>
      </el-form>

      <div class="editorDiv">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" v-for="equipment in equipmentList">
          <el-card shadow="always">
            <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form>
                <el-form-item>
                  <!--<el-button size="mini">故障报停</el-button>
                  <el-button size="mini">维保申请</el-button>-->
                  <el-button size="mini" @click.stop="stateModeBtn(0,equipment)">启用</el-button>
                  <el-button size="mini" @click.stop="stateModeBtn(1,equipment)">停用</el-button>
                </el-form-item>
                <el-form-item label="设备状态：">{{equipment.stopCause == 0 ?  '启用' : '停用' }}</el-form-item>
                <el-form-item label="设备类别：">{{equipment.typeName}}</el-form-item>
                <el-form-item label="设备编码：">{{equipment.coded}}</el-form-item>
                <el-form-item label="设备名称：">{{equipment.name}}</el-form-item>
                <el-form-item label="型号：">{{equipment.marking}}</el-form-item>
                <el-form-item label="存放位置：">{{DIC.STORAGE_LOCATION[equipment.location].label}}</el-form-item>
              </el-form>
            </el-col>
            <el-col :xs="24" :sm="17" :md="17" :lg="17" :xl="17" style="overflow-x: auto;">
              <el-table v-if="validatenull(equipment.dataList)" ></el-table>
              <div v-else-if="styleData == 0" :id="'myChart'+equipment.id" :style="{width: '550px', height: '350px'}"></div>
              <div v-else-if="styleData == 1" :id="'myChart'+equipment.id" :style="{width: '450px', height: '300px'}"></div>
              <div v-else-if="styleData == 2" :id="'myChart'+equipment.id" :style="{width: '350px', height: '250px'}"></div>
              <div v-else-if="styleData == 3" :id="'myChart'+equipment.id" :style="{width: '270px', height: '200px'}"></div>
            </el-col>
          </el-card>
        </el-col>
      </div>

      <!-- 启用/停用 -->
      <el-dialog :visible.sync="stateMode"  width="30%" center :title="stateModeTitle">
        <div v-if="stateMode">
          <el-row>
            <el-col :span="4">设备类别：</el-col>
            <el-col :span="8">{{selectionRow.typeName}}</el-col>
            <el-col :span="4">设备编码：</el-col>
            <el-col :span="8">{{selectionRow.coded}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">型号：</el-col>
            <el-col :span="8">{{selectionRow.marking}}</el-col>
            <el-col :span="4">品牌：</el-col>
            <el-col :span="8">{{selectionRow.brand}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">设备名称：</el-col>
            <el-col :span="8" v-if="selectionRow.name">{{selectionRow.name}}</el-col>
          </el-row>
        </div>
        <el-row v-if="stateModeFormIs==1">
          <el-form ref="stateModeForm"
                   :model="stateModeForm"
                   size="mini">
            <el-form-item label="停用类型："
                          prop="stop_cause"></el-form-item>
            <el-form-item label=""
                          prop="stop_cause">
              <el-radio v-model.number="stateModeForm.stop_cause"
                        :label="0">保养</el-radio>
              <el-radio v-model.number="stateModeForm.stop_cause"
                        :label="1">效准</el-radio>
              <el-radio v-model.number="stateModeForm.stop_cause"
                        :label="2">维修</el-radio>
              <el-radio v-model.number="stateModeForm.stop_cause"
                        :label="3">停用</el-radio>
              <el-radio v-model.number="stateModeForm.stop_cause"
                        :label="4">报废</el-radio>
            </el-form-item>
          </el-form>
        </el-row>
        <span slot="footer"  class="dialog-footer">
        <el-button size="small" @click="menuModeFormBtnClose()">关 闭</el-button>
        <el-button size="small" type="primary" @click="menuModeFormBtn()">{{stateModeBtnName}}</el-button>
      </span>
      </el-dialog>

    </basic-container>
  </div>
</template>


<script>
    import { validatenull } from '@/util/validate'
    import { DIC } from '@/const/dic.js'
    import { getEquipmentType ,upWalk , downBack} from '@/api/equipment/device/management.js'
    import { getListOfSearch } from '@/api/equipment/aintenance/dashboard.js'
    import { DepartmentTreeVChildrenNull } from "@/util/util.js"
    import { editorOption } from "@/const-personal/equipment/aintenance/dashboard.js"

    export default {
        data(){
            return{
                styleData:0,
                DIC :DIC,
                equipmentType:[],
                searchForm:{
                    isStatus:'',
                    state: "-1",
                    location: "-1",
                    equipmentTypeId: ['-1'],
                },
                page: {
                    total: 1, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 8, //每页显示多少条
                },
                editorOption:editorOption,
                equipmentList:[],


                stateMode: false,//修改状态
                stateModeBtnName: '',//启用模态框按钮名称
                stateModeTitle: '', //启用模态框名称
                stateModeForm: {},//启用模态表单数据
                stateModeFormIs: false,//启用模态框表单启用
                newspaperStop: { //报废申请
                    type: '',
                    docs: '',
                    typeTitle: '',
                    docsTitle: ''
                },
                newspaperStopRules: {
                    type: [{ required: true, message: '请选择类型', trigger: 'change' }],
                    docs: [{ required: true, message: '请输入申请说明', trigger: 'blur' }]
                },
                selectionRow: {}
            }
        },
        created(){
            this.getComEqType()
            if( document.documentElement.offsetWidth > 800 ){
                this.styleData = 0;
            } else if( document.documentElement.offsetWidth > 650 ){
                 this.styleData = 1;
         /*   } else if( document.documentElement.offsetWidth > 500 ){
                 this.styleData = 2;
            } else if( document.documentElement.offsetWidth > 350 ){
                this.styleData = 3;*/
            } else {
                this.styleData = 0;
            }
            // wel.vue进来的页面
            console.log(this.$route.query.type)
            // 异常设备
            if (this.$route.query.type == 1) {
              this.searchForm.isStatus = '1';
            } else if (this.$route.query.type == 2) {
              this.searchForm.isStatus = '0';
            }
        },
        mounted(){
            this.searchFormSubmit()
        },
        methods: {
            ResetForm(){ //重置搜索
                this.searchForm = {
                    state: "-1",
                    location: "-1",
                    equipmentTypeId: ['-1'],
                }
            },
            searchFormSubmit(){  //提交搜索
                this.equipmentList = []
                this.page.currentPage = 1
                this.getData()
            },
            getData(){
                let data = {
                    isStatus: this.searchForm.isStatus,
                    state: this.searchForm.state == '-1' ? null : this.searchForm.state,
                    location: this.searchForm.location == '-1' ? null : this.searchForm.location,
                    equipmentTypeId: this.searchForm.equipmentTypeId[length] == '-1' ? null : this.searchForm.equipmentTypeId[length],
                    page : this.page.currentPage,
                    size : this.page.pageSize,
                }
                getListOfSearch(data).then(res=>{
                    if (res.data.code == 200) {
                        this.equipmentList = this.equipmentList.concat(res.data.data.rows);
                        this.page.total = res.data.data.total;
                        res.data.data.rows.forEach(item=>{
                            this.$nextTick(()=>{
                                let myChart = this.$echarts.init(document.getElementById('myChart'+item.id))
                                let editorOptionData = JSON.parse(JSON.stringify(this.editorOption));
                                if(validatenull(item.dataList)){
                                    item.isHidden = false;
                                } else {
                                    item.dataList.forEach(items=>{
                                        editorOptionData.series[0].data.push(items.hz);
                                        editorOptionData.series[1].data .push(items.v);
                                        editorOptionData.xAxis.data.push(items.createTime);
                                    })
                                }
                                editorOptionData.series[0].data.splice(0,1)
                                editorOptionData.series[1].data.splice(0,1)
                                console.log(editorOptionData)
                                myChart.setOption(editorOptionData);
                            })
                        })
                    } else {
                        this.$notify.error({ title: '查询失败', message: '获取数据失败！', type: 'danger', });
                    }
                })
            },
            infiniteScrollEvent(){ // 下拉刷新
                this.page.total
                this.page.currentPage ++
                this.getData()
            },
            getComEqType() { // 获取设备类别
                getEquipmentType().then(res => {
                    if (res.data.code === 200) {
                        this.equipmentType = DepartmentTreeVChildrenNull(res.data.data,[{label:'全部',value:'-1'}])
                    } else {
                        this.$notify.error(res.data.message)
                    }
                })
            },
            stateModeBtn (state,row) { //停用启用
                this.selectionRow = row
                const stateBtnName = ['启用', '停用', '提交', '提交', '提交']
                const stateTitle = ['启用确认', '停用确认', '维保申请单', '故障报停单', '报废申请单']
                this.stateModeForm = {}
                this.stateMode = true;
                this.stateModeBtnName = stateBtnName[state]
                this.stateModeTitle = stateTitle[state]
                this.stateModeFormIs = state;
                if (state >= 2) {
                    this.newspaperStop.typeTitle = stateTitle[state].slice(0, 2) + '类型'
                    this.newspaperStop.docsTitle = stateTitle[state].slice(0, 2) + '说明'
                }
            },
            menuModeFormBtnClose () { //停用启用模态框关闭
                this.stateMode = false
            },
            menuModeFormBtn () { //提交停用启用模态框
                const state = this.stateModeFormIs //操作按钮
                const { id } = this.selectionRow
                if (state === 0) {//启用
                    //选择项id
                    upWalk({ id }).then(res => {
                        this._successInfo(res)
                    })
                } else if (state === 1) {//停用
                    if (validatenull(this.stateModeForm.stop_cause)) {
                        this.$notify.error({ title: '操作提示', message: '请选择停用类型！', type: 'danger', });
                        return;
                    }
                    let params = { id, stopCause: this.stateModeForm.stop_cause  }
                    downBack(params).then(res => this._successInfo(res))
                }
            },
            _successInfo (res, shenqi = false) {
                if (res.data.code === 200) {
                    this.$notify({ title: '操作成功', type: 'success', message: res.data.message});
                    this.stateMode = false;
                    this.searchFormSubmit()
                    this.handleList();
                    this.stateMode = false
                    this.selectionRow = { id: '' }
                    if (shenqi) {
                        this.$refs['newspaperStop'].resetFields();
                    }
                } else {
                    this.$notify.error({ title: '操作提示', message: res.data.message, type: 'danger', });
                }
            },
        }
    }
</script>
<style>
  .editorDiv .el-form .el-form-item{
    margin-bottom:0px!important;
  }
  .editorDiv>.el-col{
    padding:0px 5px!important;
  }
  .el-table__empty-block{
    min-height: 350px !important;
  }
</style>